<html data-theme="light">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>安装向导 - 彩虹工具网</title>
    <link rel="icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/daisyui/2.2.2/full.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" type="text/css"/>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/limonte-sweetalert2/11.4.4/sweetalert2.all.min.js"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js"></script>
    <style>
        body {
            background-image: url("static/images/install_background.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }

        .panel {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.67);
            overflow: hidden;
            animation: panel 1s ease-in-out;
        }

        @keyframes panel {
            0% {
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
                opacity: 0;
                -webkit-transform: translate(-50%, -50%) perspective(400px) rotateX(90deg);
                transform: translate(-50%, -50%) perspective(400px) rotateX(90deg)
            }

            40% {
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
                -webkit-transform: translate(-50%, -50%) perspective(400px) rotateX(-20deg);
                transform: translate(-50%, -50%) perspective(400px) rotateX(-20deg)
            }

            60% {
                opacity: 1;
                -webkit-transform: translate(-50%, -50%) perspective(400px) rotateX(10deg);
                transform: translate(-50%, -50%) perspective(400px) rotateX(10deg)
            }

            80% {
                -webkit-transform: translate(-50%, -50%) perspective(400px) rotateX(-5deg);
                transform: translate(-50%, -50%) perspective(400px) rotateX(-5deg)
            }

            to {
                -webkit-transform: translate(-50%, -50%) perspective(400px);
                transform: translate(-50%, -50%) perspective(400px)
            }
        }

        .table td, .table th {
            background-color: transparent !important;
        }

        .v-enter-active {
            transition: all .8s ease;
        }

        .v-leave-active {
            transition: all .8s ease;
        }

        .v-enter {
            transform: translateX(100%);
            opacity: 0;
        }

        .v-leave-to {
            transform: translateX(-100%);
            opacity: 0;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="container mx-auto" id="app">
    <div class="panel w-11/12 sm:w-3/4 md:w-2/3 2xl:w-1/2">
        <div class="card text-center ">
            <div class="card-body pt-8 pb-0">
                <ul class="steps steps-horizontal">
                    <li class="step step-accent">开始安装</li>
                    <li class="step" :class="{'step-accent':step>0}">检测安装环境</li>
                    <li class="step" :class="{'step-accent':step>1}">配置数据库</li>
                    <li class="step" :class="{'step-accent':step>2}">配置管理员账号</li>
                    <li class="step" :class="{'step-accent':step>3}">完成安装</li>
                </ul>
            </div>
        </div>
        <div class="card text-center shadow-2xl main">
            <transition>
                <div class="card-body" v-show="step===0">
                    <h2 class="card-title m-auto">欢迎安装彩虹工具箱</h2>
                    <p>Welcome to install Caihong Toolbox.</p>
                    <div class="justify-center card-actions">
                        <button class="btn btn-outline btn-accent" @click="step++">开始安装吧~</button>
                    </div>
                </div>
            </transition>
            <transition>
                <div class="card-body" v-show="step===1">
                    <h2 class="card-title m-auto">检测安装环境</h2>
                    <div class="overflow-x-auto">
                        <table class="table w-full">
                            <thead>
                            <tr>
                                <th>检测项</th>
                                <th>检测结果</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item,index) in requirements" :key="index">
                                <td>{{index}}</td>
                                <td>
                                    <div class="badge badge-success" v-if="item">
                                        Yes
                                    </div>
                                    <div class="badge badge-error" v-else>
                                        No
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="justify-center card-actions">
                        <button class="btn btn-outline btn-accent" @click="step++">下一步</button>
                    </div>
                </div>
            </transition>
            <transition>
                <div class="card-body" v-show="step===2">
                    <h2 class="card-title m-auto">配置数据库信息</h2>
                    <div>
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">数据库地址</span>
                            </label>
                            <input type="text" v-model="database.hostname" placeholder="请输入数据库地址"
                                   class="input input-accent input-bordered">
                        </div>
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">数据库端口</span>
                            </label>
                            <input type="text" v-model="database.hostport" placeholder="请输入数据库端口"
                                   class="input input-accent input-bordered">
                        </div>
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">数据库用户名</span>
                            </label>
                            <input type="text" v-model="database.username" placeholder="请输入数据库用户名"
                                   class="input input-accent input-bordered">
                        </div>
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">数据库密码</span>
                            </label>
                            <input type="text" v-model="database.password" placeholder="请输入数据库密码"
                                   class="input input-accent input-bordered">
                        </div>
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">数据库名</span>
                            </label>
                            <input type="text" v-model="database.database" placeholder="请输入数据库名"
                                   class="input input-accent input-bordered">
                        </div>
                    </div>
                    <div class="justify-center card-actions">
                        <button class="btn btn-outline btn-accent" @click="step++">下一步</button>
                    </div>
                </div>
            </transition>
            <transition>
                <div class="card-body" v-show="step===3">
                    <h2 class="card-title m-auto">配置管理员账号</h2>
                    <div>
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">用户名</span>
                            </label>
                            <input type="text" v-model="admin.username" placeholder="请输入用户名"
                                   class="input input-accent input-bordered">
                        </div>
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">密码</span>
                            </label>
                            <input type="text" v-model="admin.password" placeholder="请输入密码"
                                   class="input input-accent input-bordered">
                        </div>
                    </div>
                    <div class="justify-center card-actions">
                        <button class="btn btn-outline btn-accent" @click="step++">下一步</button>
                    </div>
                </div>
            </transition>
            <transition>
                <div class="card-body" v-show="step===4">
                    <h2 class="card-title m-auto">完成安装</h2>
                    <p>恭喜你，已经成功安装了彩虹工具箱~</p>
                    <div class="justify-center card-actions">
                        <button class="btn btn-outline btn-accent" @click="window.location.href='/'">网站首页</button>
                        <button class="btn btn-outline btn-accent" @click="window.location.href='/admin/'">管理后台</button>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</div>
<script>
const instance = axios.create({
    baseURL: '/',
    // timeout: 1000,
    // headers: {'X-Custom-Header': 'foobar'}
});
const httpPost = (url, params) => {
    return instance.post(url, params)
        .then(res => {
            return res.data
        }).then(res => {
            if (res.status !== "ok") {
                Swal.fire({icon: 'error',title: res.message})
            }
            return res
        })
}
    new Vue({
        el: '#app',
        data: {
            step: 0,
            status: {},
            requirements: JSON.parse(`{:json_encode($requirements)}`),
            database: {
                hostname: 'localhost',
                hostport: '3306',
                database: '',
                username: '',
                password: '',
            },
            admin: {
                username: 'admin',
                password: '',
            },
        },
        watch: {
            step(newVal, oldVal) {
                let loading = null
                if (this.status[newVal]) {
                    return
                }
                this.status[newVal] = true
                switch (newVal) {
                    case 2:
                        let values = Object.values(this.requirements);
                        if (values.includes(false)) {
                            this.step = oldVal;
                            Swal.fire({icon: 'error',title: '环境不通过'})
                            this.status[newVal] = false
                            return
                        }
                        break
                    case 3:
                        loading = Swal.fire({title: '正在完成数据库安装', allowOutsideClick: false})
                        Swal.showLoading()
                        httpPost('/install/database', this.database).then(res => {
                            if (res.status === 'ok') {
                                httpPost('/install/init_data', {}).then(res2 => {
                                    if (res2.status !== 'ok') {
                                        this.step = oldVal
                                        this.status[newVal] = false
                                    }
                                })
                            } else {
                                this.step = oldVal
                                this.status[newVal] = false
                            }
                        }).finally(() => loading.close())
                        break
                    case 4:
                        loading = Swal.fire({title: '正在完成管理员账号配置', allowOutsideClick: false})
                        Swal.showLoading()
                        httpPost('/install/admin', this.admin).then(res => {
                            if (res.status !== 'ok') {
                                this.step = oldVal
                                this.status[newVal] = false
                            }
                        }).finally(() => loading.close())
                        break
                }
            }
        },
        methods: {}
    })
</script>
</body>
</html>